<template>
	<div>
		<div class="formBox">
			<t-form
				v-show="!isFold"
				ref="form"
				:rules="FORM_RULES"
				:data="formData"
				:layout="'inline'"
				scroll-to-first-error="smooth"
				:class="isFold ? '' : 'paddingBottom'"
				labelAlign="right"
			>
				<t-form-item label="手机号码" name="mobilephonenum" :label-width="90" requiredMark>
					<t-input placeholder="请输入手机号码" v-model="formData.mobilephonenum" style="width: 165px" />
				</t-form-item>
				<t-form-item label="外呼次数" name="calloutnum" :label-width="90" requiredMark>
					<t-input placeholder="请输入手机号码" v-model="formData.mincall" @change="onMinCallChange" type="number" style="width: 70px" />
					<span style="width: 20px; text-align: center">~</span>
					<t-input placeholder="请输入手机号码" v-model="formData.maxcall" @change="onMaxCallChange" type="number" style="width: 70px" />
				</t-form-item>
				<t-form-item label="归属地（省）" name="provinceaff" :label-width="90" requiredMark>
					<t-select
						placeholder="请选择归属地（省）"
						v-model="formData.provinceaff"
						@change="onPlatformChange"
						:options="platformOptions"
						filterable
						style="width: 170px"
					></t-select>
				</t-form-item>
				<t-form-item label="归属地（市）" name="cityaff" :label-width="90" requiredMark>
					<t-select
						placeholder="请选择归属地（市）"
						v-model="formData.cityaff"
						@change="onPlatformChange"
						:options="platformOptions"
						filterable
						style="width: 165px"
					></t-select>
				</t-form-item>

				<t-form-item label="类别" name="categories" :label-width="90" requiredMark>
					<t-select
						placeholder="请选择类别"
						v-model="formData.categories"
						@change="onPlatformChange"
						:options="platformOptions"
						filterable
						style="width: 165px"
					></t-select>
				</t-form-item>
				<t-form-item label="运营商" name="operator" :label-width="90" requiredMark>
					<t-select
						placeholder="请选择运营商"
						v-model="formData.operator"
						@change="onPlatformChange"
						:options="platformOptions"
						filterable
						style="width: 165px"
					></t-select>
				</t-form-item>
				<t-form-item label="时间范围" name="timescope" :label-width="90" requiredMark>
					<t-date-range-picker v-model="nowtime" :presets="presets" :disableDate="disDate" style="width: 355px" />
				</t-form-item>
				<!-- <dk-button>测试</dk-button> -->	
				<t-form-item class="formHandleBox" v-if="!isFold" :label-width="0">
					<t-space size="small" style="gap: 10px; width: 60px">
						<dk-button @click="handleQuery">查询</dk-button>
						<!-- <dk-button @click="handleReset" type="outlinePrimary">刷新</dk-button> -->
					</t-space>
				</t-form-item>
			</t-form>
			<!-- 展开 -->
			<!-- <div class="upArrow" v-show="isFold">
					<icon-svg @click="handleArrow" :name="'icon-arrowTD'" class-name="arrowTD-svg-icon" :style="isFold === true ? '' : 'transform: rotate(180deg)'"></icon-svg>
				</div> -->
                <!-- 拖拽排序涉及到 data 的变更，相对比较慎重，因此仅支持受控用法 -->
                <dk-divider style="margin: 20px 0"></dk-divider>
      <t-table row-key="index" :pagination="{ defaultPageSize: 5, defaultCurrent: 1, total: 100 }" :columns="columns" :data="data" drag-sort="col" lazy-load @drag-sort="onDragSort">
      </t-table>
		</div>
	</div>
</template>

<script setup lang="jsx">
import { ref,reactive } from 'vue';
// 表格数据
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    index: i + 1,
    applicant: ['贾明', '张三', '王芳'][i % 3],
    mobilephonenum: ['13333672892', '13333672892', '13333672892'][i % 3],
    categories: i % 3,
    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
    detail: {
      email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
    },
    matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
    time: [2, 3, 1, 4][i % 4],
    createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
  });
}
// 表格columns列
const initialColumns = [
  { colKey: 'index', title: '序号', width: '100', fixed: 'left' },
  { colKey: 'applicant', title: '编号', width: '100',},
  { colKey: 'mobilephonenum', title: '手机号', width: '120' },
  { colKey: 'categories', title: '类别', ellipsis: true },
  { colKey: 'detail.email', title: '外呼次数', ellipsis: true },
  { colKey: 'createTime', title: '导入时间' },
  { colKey: 'operator', title: '运营商', ellipsis: true },
  { colKey: 'provinceaff', title: '归属地（省）', ellipsis: true },
  { colKey: 'cityaff', title: '归属地（市）', ellipsis: true },
];
const columns = ref(initialColumns);

// 
// currentData is going to be deprecated
const onDragSort = ({ currentIndex, targetIndex, current, target, data, newData, e, sort }) => {
  console.log('交换行', currentIndex, targetIndex, current, target, data, newData, e, sort);
  if (sort === 'col') {
    columns.value = newData;
  }
};



// form 表单
const formData = reactive({
	mobilephonenum: '', //电话号码
	calloutnum: [], //外呼次数区间
	mincall: '', //外呼次数区间
	maxcall: '', //外呼次数区间
	provinceaff: '', //归属地（省）
	cityaff: '', //归属地（市）
	categories: '', //类别
	operator: '' //运营商
});
// 时间
const nowtime = ref([]);
// 获取当前日期
const now = new Date();
// 计算本周一的时间
const startOfWeek = new Date(now);
const dayOfWeek = now.getDay(); // 获取当前是星期几，0 表示星期天
const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 如果是星期天，回退到前一个星期一
startOfWeek.setDate(now.getDate() - diff);
startOfWeek.setHours(0, 0, 0, 0); // 设置为本周一的00:00:00
// 时间快捷键
const presets = reactive({
	今天: [new Date(), new Date()],
	昨天: [new Date(+new Date() - 86400000), new Date(+new Date() - 86400000)],
	本周: [startOfWeek, new Date()],
	本月: [new Date(new Date().getFullYear(), now.getMonth(), 1, 0, 0, 0, 0), new Date()],
	近7天: [new Date(+new Date() - 86400000 * 6), new Date()],
	近30天: [new Date(+new Date() - 86400000 * 29), new Date()]
});
const disDate = ref({
	before: new Date(+new Date() - 86400000 * 47),
	after: new Date(+new Date() + 86400000 * 46)
});

// 表单校验
const FORM_RULES = {
	mobilephonenum: [
	{ required: false, message: '请输入手机号码' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
	],
	calloutnum: [
		{
			validator: (val, value, callback) => {
				console.log(val, '========>val');
				const regex = /^[1-9]$/;
				if (val[0] == '' || val[1] == '' || val.length < 2) {
					return false;
				} else if (!regex.test(val[0]) || !regex.test(val[1])) {
					// console.log(regex.test(val[0]),'========>regex.test(val[0])');
					return false;
				} else {
					return true;
				}
			},
			message: '请输入1~9的外呼次数',
			trigger: 'change'
		}
	],
	provinceaff: [{ required: true, message: '请选择归属地（省）', trigger: 'change' }],
	cityaff: [{ required: true, message: '请选择归属地（市）', trigger: 'change' }],
	categories: [{ required: true, message: '请选择类别', trigger: 'change' }],
	operator: [{ required: true, message: '请选择供应商', trigger: 'change' }],
	timing: [{ required: true, message: '请选择启动时间段' }],
	bells: [
		{ required: true, message: '请输入最长振铃时间(5s-60s)' },
		{ pattern: /^([5-9]|[1-5][0-9]|60)$/, message: '请输入5s-60s正整数', trigger: 'change' }
	]
};

const onMinCallChange = (val) => {
	formData.calloutnum[0] = val;
	console.log(formData.calloutnum, '========>val');
};
const onMaxCallChange = (val) => {
	formData.calloutnum[1] = val;
	console.log(formData.calloutnum, '========>val');
};




</script>

<style lang="scss" scoped>
.formBox {
	padding: 20px;
}
:deep(.t-form-inline .t-form__item) {
	min-width: 60px !important;
}
:deep(.t-pagination .t-pagination__select){
    position: relative;
    height: 28px !important;
}
</style>
